<template>
	<view class="">
		<uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		:border="false"
		 :leftIcons="true"
		backgroundColor="#1D7DFF"
		leftIcon="back"
		@click-left="back"
		color="#ffffff">
			<view class="index-top-nav-title">
				<view class="">{{info.title}}</view>
				<!-- <text @tap.stop="jumpList" class="iconfonts">{{i18n.bili}}</text> -->
			</view>
		</uni-nav-bar>
		
		<view class="fund-live-detail-top">
			<view class="fund-live-detail-top-item">
				<view class="">{{info.sl | formatParsefloat}}</view>
				<span>{{i18n.day_rate}}</span>
			</view>
			<view class="fund-live-detail-top-item">
				<view class="">{{info.day}}</view>
				<span>{{i18n.Closed_period}} （{{i18n.day}}）</span>
			</view>
			<view class="fund-live-detail-top-item">
				<view class="">{{info.max | formatParsefloat}}</view>
				<span>{{i18n.Remaining_investable}}（Block）</span>
			</view>
		</view>
		<view class="fund-live-balance">
			<view>{{i18n.AvailableBalance}}：{{balance | formatParsefloat}} Block</view>
			<span @tap.stop="allIn">{{i18n.Full_balance}}</span>
		</view>
		<view class="fund-live-investment">
			<view class="fund-live-investment-number">
				<span>{{i18n.investment_amount}}（Block）</span>
				<input type="number" value="" maxlength="16" placeholder="请输入投资数量" v-model="num"/>
			</view>
			<view class="fund-live-investment-span">
				{{i18n.value}}{{info.buy_mini | formatParsefloat}}USDT{{i18n.Start_investment}}
			</view>
			
			<view class="fund-live-investment-prograss">
				<view class="fund-live-investment-prograss-actvie" :style="{width:(info.percentage)+'%'}"></view>
				<text :style="{left:( info.percentage==100 ?92: info.percentage-10)+'%'}">{{(info.percentage)}}%</text>
			</view>
			
			<view class="fund-live-investment-prograss-bottom">
				{{i18n.Remaining}}{{info.max}}
			</view>
		</view>
		
		<view class="fund-live-detail-bottom">
			<view class="fund-live-detail-bottom-paypwd">
				<span>{{i18n.paypwds}} :</span>
				<input type="password" value="" maxlength="6" :placeholder="i18n.p_enter_paddword" v-model="paypwd"/>
			</view>
			<view class="fund-live-detail-bottom-btn" :loading="loading" :class="isshows?'active':''" hover-class="act" @tap.stop="submit">
				{{i18n.Confirm_transfer}}
			</view>
			<view class="fund-live-detail-bottom-protocol">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="isshow"  :checked="checked?true:false"/><text @tap.stop="toSev">{{i18n.fund_live_detail_tag}}<text class="_bli">{{i18n.fund_live_detail_tag01}}</text></text>
					</label>
				</radio-group>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import indexList from "../../components/common/index-list.vue"
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		data() {
			return {
				info:{},
				checked:true,
				num:'',
				paypwd:'',
				balance:0,
				isClick:false,
				showLoad:false,
				loading:false,
				wallInfo:{}
			}
		},
		computed:  {
			buy_nums(){
				return (parseInt((this.info.buy_mini/this.wallInfo.price)*10000))/10000
			},
			i18n() {
				return this.$t('message'); 
			},
			isshows(){
				return this.num.length && this.paypwd.length>=6?true:false;
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getPackages'
			])
		},
		onNavigationBarButtonTap(e) {
			// console.log(e);
			if(e.index==0){
				this.jumpList()
			}
		},
		components:{
			uniNavBar,
			indexList,
			Load
		},
		onLoad() {
			this.getToken();
			this.info = JSON.parse(this.getPackages)
			console.log(JSON.parse(this.getPackages));
		},
		methods:{
			toSev(){
				uni.navigateTo({
					url:'/pages/setting/protocol'
				})
			},
			submit(){
				if(this.isClick){return}
				if (!this.num) {
					showToast(this.i18n.enter_payment_code)
					return
				}
				if (!this.paypwd) {
					showToast(this.i18n.enter_payment_code)
					return
				}
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLang=='en'?2:1,
					paypwd: this.paypwd,
					num:this.num,
					shopid: this.info.id,
					token_id: this.info.token_id
				}
				let url = this.getRequestUrl + '/api/shop/buy_shop'
				this.isClick = true;
				this.showLoad = true;
				fetch(url, _data, 'post')
					.then(res => {
						this.isClick = false;
						this.showLoad = false;
						if (res.statusCode == 200 && res.data.code == 1) {
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},500)
						}
						showToast(res.data.msg)
					})
					.catch(err => {
						this.empty()
						console.log(err)
					})
			},
			allIn(){
				this.num = this.balance
			},
			jumpList(){
				uni.navigateTo({
					url:'/pages/fund/list'
				})
			},
			radioChange(ev){
				console.log(ev);
				this.checked = !this.checked
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getToken(){
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let _data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token
				}
				fetch(url,_data,"POST").then(res=>{
					if(res.data.code){
						let list = res.data.data.list;
						let bl = list.filter((item,index)=>{
							return item.token_id==1
						})
						this.balance = bl[0].financial+''
						this.wallInfo = bl[0]
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index-top-nav-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		view{
			font-size:36upx;
			font-weight: bold;
		}
		text{
			font-size:26upx;
			font-weight: 100;
		}
	}
	.fund-live-detail-top{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1d7dff;
		.fund-live-detail-top-item{
			padding: 66upx 0;
			flex: 1;
			align-items: center;
			text-align: center;
			position: relative;
			color: #FFFFFF;
			&::after{
				position: absolute;
				width: 2upx;
				height: 65upx;
				background-color: #FFFFFF;
				content: '';
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			&:last-child{
				&::after{
					display: none;
				}
			}
			view{
				font-size: 30upx;
			}
			span{
				font-size:22upx;
				color: #BCBCC4;
			}
		}
	}
	.fund-live-balance{
		display: flex;
		line-height: 100upx;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		font-size: 24upx;
		border-bottom: 1upx solid #e4e4e4;
		span{
			color: #FF6D1D;
		}
	}
	.fund-live-investment{
		padding: 44upx 0 66upx;
		border-bottom: 20upx solid #ECECEC;
		.fund-live-investment-number{
			text-align: center;
			span{
				font-size: 23upx;
			}
			input{
				padding: 24upx 0;
				width: 50%;
				margin-left: 25%;
				border-bottom: 2upx solid #dad9dc;
				color: #1D7DFF;
				font-size:38upx;
				font-weight: bold;
			}
		}
		.fund-live-investment-span{
			text-align: center;
			padding: 44upx 0;
			font-size: 23upx;
		}
		.fund-live-investment-prograss-bottom{
			text-align: right;
			padding: 15upx 84upx;
			font-size: 23upx;
		}
		.fund-live-investment-prograss{
			margin: 0 84upx;
			position:relative;
			&::before{
				content:"";
				background-color:#C3C3C3;
				width:100%;
				height:6upx;
				position:absolute;
				left:0;
				top:0;
			}
			.fund-live-investment-prograss-actvie{
				position:absolute;
				height:6upx;
				left:0;
				top:0;
				background:#1D7DFF;
				z-index: 998;
			}
			text{
				position:absolute;
				top:0;
				display:flex;
				align-items:center;
				padding:12upx;
				border-radius:100upx;
				font-size:20upx;
				color:#ffffff;
				transform: translateX(100%);
				transform: translatey(-50%);
				background-color:#1D7DFF;
				z-index: 999;
			}
		}
	}
	.fund-live-detail-bottom{
		padding: 0 30upx;
		.fund-live-detail-bottom-paypwd{
			display: flex;
			align-items: center;
			padding:40upx 0 20upx;
			border-bottom: 1upx solid #eaeaea;
			span{
				width: 180upx;
				line-height: 80upx;
			}
			input{
				flex: 1;
				line-height: 80upx;
				height: 80upx;
			}
		}
		.fund-live-detail-bottom-btn{
			width: 410upx;
			height: 80upx;
			margin:20upx auto;
			line-height: 80upx;
			font-size:26upx;
			text-align: center;
			border-radius:10upx;
			color: #333333;
			background-color: #ececee;
			&.active{
				background-color: #1D7DFF;
				color: #FFFFFF;
			}
			&.act{
				opacity: .95;
				transform: scale(.95);
			}
		}
		.fund-live-detail-bottom-protocol{
			text-align: center;
			label{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					._bli{
						color: #426bfa;
						text-decoration: underline;
					}
				}
			}
		}
	}
</style>
